﻿@{Layout = "~/Views/Shared/_Layout.cshtml";}
<h1>Book a Room</h1>
<script>

    function post() {
        document.getElementById("bookanyway").value = "true";
        document.forms["form"].submit();
    }
</script>

<p class="Subtitle">Here you are able to book a room at a specified date. </p>
    
    @if(ViewData.Model != null)
    {
        
        if (ViewData.Model.GetType() == typeof(string))
        {
            Response.Write("<div class='Error'>" + ViewData.Model + "</div>");
        }
        else
        {
            <div class='Error'>Your booking collides with: <br />
            @foreach (var collision in ViewData.Model)
            {
                @collision.CourseInstance.Course.ID  <text>Booked By</text> @collision.User.ID <text> at </text>
                if(collision.StartDate.Date == collision.EndDate.Date) {
                    @collision.StartDate.ToShortDateString() <text>(</text>
                    @collision.StartDate.ToShortTimeString() <text>-</text> 
                    @collision.EndDate.ToShortTimeString() <text>)</text>
                }else{
                    @collision.StartDate <text> - </text> @collision.EndDate
                }
                <br />
            }
            Please consider using the Search for Room feature to find a free room. </div>
        }
    }
    @if (ViewData["collision"] == "true")
    {
        <button type="button" onclick="post()">Book Anyway</button> 
    }
    

<form method="post" id="form">
    <input type="text" name="bookanyway" hidden="hidden" id="bookanyway" value="false"/>
    <table class="Form">
        <tr>
            <th>Booker</th>
            <td><input type="text" name="inUser" value="@ViewData["UserID"]" disabled="disabled" /></td>
        </tr>
        <tr>
            <th>Room</th>
            <td><input type="text" name="inRoom" id="inRoom" value="@ViewData["inRoom"]" /></td>
        </tr>
        <tr>
            <th>Course Application Code</th>
            <td><input type="text" name="inCourse" id="inCourse" value="@ViewData["inCourse"]" /></td>
        </tr>
    </table>
    <table class="Form">
        <tr>
            <th>Start</th>
            <td style="width:150px;">
                Date: <input type="text" name="inStartDate" style="width:110px;" value="@ViewData["inStartDate"]" />
            </td>
            <td>
                Time: @Html.DropDownList("inStartTime", Scheduling.Models.Helpers.SchedulingHelper.GenerateBookingStartTimes(), new { Size = "1", Style = "width:60px;" })
            </td>
        </tr>
        <tr>
            <th>End</th>
            <td>
                Date: <input type="text" name="inEndDate" style="width:110px;" value="@ViewData["inEndDate"]" />
            </td>
            <td>
                Time: @Html.DropDownList("inEndTime", Scheduling.Models.Helpers.SchedulingHelper.GenerateBookingEndTimes(), new { Size = "1", Style = "width:60px;" })
            </td>
        </tr>
    </table>
    <input class="Button" type="submit" value="Book Room" />

</form><br />
@Html.ActionLink("Return to List", "List")
<script type="text/javascript">
    $('input[name=inStartDate]').datepicker({ dateFormat: 'yy-mm-dd',
        onSelect: function (dateText, inst) {
            $('input[name=inEndDate]').val(dateText);
        }
    });
    $('input[name=inEndDate]').datepicker({ dateFormat: 'yy-mm-dd' });

    var data = "@Scheduling.Models.Helpers.SchedulingHelper.GenerateRoomAutocomplete()".split(",");
    $("#inRoom").autocomplete({ source: data});

    var data1 = "@Scheduling.Models.Helpers.SchedulingHelper.GenerateCourseInstanceAutocomplete()".split(",");
    mincChrs = "2";
    $("#inCourse").autocomplete({ source: data1, delay: 400, max: 10 });
    $('#inStartTime').change(function () {
        var start = $('#inStartTime').val().split(':')[0] * 1.0;
        start += 2;
        $('#inEndTime').val(start + ":00");
    });
</script>